<template>
  <div class="container" :class="{active: is_load?  active: ''}">
    <div style=" position: fixed;top:0;width: 100vw;z-index: 99">
      <home-common-search :from="'home'" type="good" v-if="pageActivited"></home-common-search>
    </div>
    <div style="width: 100vw;height: 2.5rem"></div>
    <index-banner v-if="banners && banners.length > 0" :items="banners"></index-banner>
    <index-menu :items="navs"></index-menu>
    <index-article class="mb-5" :items="articles"></index-article>
    <index-floor-ads v-if="floorAds" :ad="floorAds? floorAds[0] : ''"></index-floor-ads>
    <IndexMyselfList :ad="myselfList? myselfList[0] :''"></IndexMyselfList>
    <index-three-ads :items="promotionAds"></index-three-ads>

    <index-product-list
      :items="hotProducts"
      title="热门推荐"
      :type="popular"
      v-if="hotProducts && hotProducts.length > 0"
    ></index-product-list>
    <index-floor-ads v-if="floorAds" :ad="floorAds[1]"></index-floor-ads>
    <index-product-list
      :items="goodProducts"
      title="销量排行"
      :type="sale"
      v-if="goodProducts && goodProducts.length > 0"
    ></index-product-list>
    <index-floor-ads v-if="floorAds" :ad="floorAds[2]"></index-floor-ads>
    <index-product-list
      :items="recentlyProducts"
      title="新品上架"
      :type="recently"
      v-if="recentlyProducts && recentlyProducts.length > 0"
    ></index-product-list>
    <no-more></no-more>
    <!-- is_load || -->
    <div class="load" v-if="is_covering">
      <!-- <img class="loadImg" v-if="is_load" src="../../../assets/image/load.gif" alt /> -->
      <div v-if="suspensionInfo.fixed_suspension_state == 1 && is_covering">
        <img
          class="suspension"
          @click="fixedSuspension"
          :src="suspensionInfo.fixed_suspension_img"
          alt
        />
        <span class="del-btn iconfont" @click="closeSuspension">&#xe619;</span>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
import { Toast } from "mint-ui";
import IndexProductList from "./IndexProductList";
import HomeCommonSearch from "../common/HomeCommonSearch";
import IndexBanner from "./IndexBanner";
import IndexMenu from "./IndexMenu";
import IndexFloorAds from "./IndexFloorAds";
import IndexThreeAds from "./IndexThreeAds";
import IndexArticle from "./IndexArticle";
import IndexMyselfList from "./IndexMyselfList";
import NoMore from "../../NoMore.vue";
import { getfixedSuspension } from "../../../api/homeindex";

// getfixedSuspension
export default {
  name: "HomeIndex",
  data() {
    return {
      active: "active",
      // is_load: this.$route.query.openid? true : false,
      is_load: false,
      isshowBacktop: true,
      popular: "recommend",
      sale: "goods_salenum",
      recently: "goods_addtime",
      pageActivited: true,
      is_covering: false,
    };
  },
  components: {
    IndexProductList,
    HomeCommonSearch,
    IndexBanner,
    IndexMenu,
    IndexFloorAds,
    IndexThreeAds,
    IndexArticle,
    IndexMyselfList,
    NoMore,
  },
  mounted() {},
  created: function () {
    console.log(sessionStorage.getItem("fixed_suspension_img"))
  },
  beforeRouteEnter(to, from, next) {
    if (from.path == "/home/goodsdetail") {
      to.meta.isBack = true;
    } else {
      to.meta.isBack = false;
    }
    next();
  },
  isLoad() {},
  activated() {
    this.pageActivited = true;
    if (!this.$route.meta.isBack || !this.banners || !this.myselfList) {
      // 判断返回的页面是否需要A页面进行缓存，如果不需要，就清空列表，重新请求
      // location.reload();
      this.init();
    }
  },
  deactivated() {
    this.pageActivited = false;
  },
  computed: {
    ...mapState({
      config: (state) => state.config.config,
      banners: (state) => state.home.banners,
      myselfList: (state) => state.home.myselfList,
      navs: (state) => state.home.navs,
      floorAds: (state) => state.home.floorAds,
      promotionAds: (state) => state.home.promotionAds,
      articles: (state) => state.home.articles,
      hotProducts: (state) => state.home.hotProducts,
      recentlyProducts: (state) => state.home.recentlyProducts,
      goodProducts: (state) => state.home.goodProducts,
      suspensionInfo: (state) => state.home.suspensionInfo,
    }),
  },
  methods: {
    ...mapActions({
      fetchHomeAd: "fetchHomeAd",
      fetchHomeArticle: "fetchHomeArticle",
      fetchHomeProduct: "fetchHomeProduct",
      fetchConfig: "fetchConfig",
      fetchHomeSuspension: "fetchHomeSuspension",
    }),
    //悬浮窗
    fixedSuspension() {
      location.href = this.suspensionInfo.fixed_suspension_url;
    },
    //关闭悬浮窗
    closeSuspension() {
      sessionStorage.setItem(
        "fixed_suspension_img",
        this.suspensionInfo.fixed_suspension_img
      );
      var test = sessionStorage.getItem("fixed_suspension_img");
      this.is_covering = false;
      // document.cookie = this.suspensionInfo.fixed_suspension_img;
      console.log(test);
      // getItem
    },
    isSuspension() {
      if (this.suspensionInfo.fixed_suspension_state) {
        // var suspensionImg = document.cookie;
        var suspensionImg = sessionStorage.getItem("fixed_suspension_img");
        if (suspensionImg) {
          this.is_covering = false;
        //   if (
        //     suspensionImg.indexOf(
        //       this.suspensionInfo.fixed_suspension_img.split("?")[0]
        //     ) >= 0
        //   ) {
        //     this.is_covering = false;
        //   } else {
        //     this.is_covering = true;
        //     // document.cookie = this.suspensionInfo.fixed_suspension_img;
        //   }
        // } else {
        //   this.is_covering = true;
        // }
      } else {
        
        this.is_covering = true;
      }
      // if (suspensionImg) {
      //   if (
      //     suspensionImg.indexOf(
      //       this.suspensionInfo.fixed_suspension_img.split("?")[0]
      //     ) >= 0
      //   ) {
      //     this.is_covering = false;
      //   } else {
      //     this.is_covering = true;
      //     // document.cookie = this.suspensionInfo.fixed_suspension_img;
      //   }
      // } else {
      //   this.is_covering = true;
      // }
      }
    },

    // 初始化
    init() {
      this.is_load = true;
      Promise.all([
        this.fetchHomeAd({}),
        this.fetchHomeArticle({}),
        this.fetchHomeProduct({}),
        this.fetchConfig({}),
        this.fetchHomeSuspension({}),
      ]).then((resThis) => {
        // this.$route.query.openid
        this.is_load = false;
        this.isSuspension();
      });

      // this.fetchHomeAd({}).then(
      //   (response) => {

      //   },
      //   (error) => {
      //     Toast(error.message);
      //   }
      // );
      // this.fetchHomeArticle({}).then(
      //   (response) => {},
      //   (error) => {
      //     Toast(error.message);
      //   }
      // );
      // this.fetchHomeProduct({}).then(
      //   (response) => {},
      //   (error) => {
      //     Toast(error.message);
      //   }
      // );
      // this.fetchConfig({}).then(
      //   (response) => {},
      //   (error) => {
      //     Toast(error.message);
      //   }
      // );
    },
  },
};
</script>

<style scoped>
.active {
  width: 100%;
  height: calc(100vh - 2.5rem);
  overflow: hidden;
}
.container {
  position: relative;
}

.load {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1212;
  background: rgba(0, 0, 0, 0.5);
}
.load .loadImg {
  position: relative;
  top: calc(50% - 64px);
  left: calc(50% - 64px);
  z-index: 333;
}
.load div {
  width: 80%;
  margin: auto;
  position: relative;
  top: 25%;
  left: 0;
  z-index: 1234;
}
.load .suspension {
  width: 100%;
  border-radius: 10px;
}
.load span {
  position: absolute;
  z-index: 1235;
  top: -0.65rem;
  left: calc(100% - 0.6rem);
  font-size: 1.2rem;
}
</style>
